export default {
  data() {
    return {
      isshow: false,
      viewWidth: 0,
      buttonWidth: 0,
      disabledView: false,
      x: 0,
      transition: false
    }
  },
  watch: {
    show(newVal) {
      if (this.autoClose) return
      if (newVal) {
        this.open()
      } else {
        this.close()
      }
    }
  },
  created() {
    if (this.swipeaction.children !== undefined) {
      this.swipeaction.children.push(this)
    }
  },
  beforeDestroy() {
    this.swipeaction.children.forEach((item, index) => {
      if (item === this) {
        this.swipeaction.children.splice(index, 1)
      }
    })
  },
  mounted() {
    this.isopen = false
    this.transition = true
    setTimeout(() => {
      this.getQuerySelect()
    }, 50)
  },
  methods: {
    onClick(index, item) {
      this.$emit('click', {
        content: item,
        index
      })
    },
    touchstart(e) {
      const { pageX, pageY } = e.changedTouches[0]
      this.transition = false
      this.startX = pageX
      if (this.autoClose) {
        this.swipeaction.closeOther(this)
      }
    },
    touchmove(e) {
      const { pageX } = e.changedTouches[0]
      this.slide = this.getSlide(pageX)
      if (this.slide === 0) {
        this.disabledView = false
      }
    },
    touchend(e) {
      this.stop = false
      this.transition = true
      if (this.isopen) {
        if (this.moveX === -this.buttonWidth) {
          this.close()
          return
        }
        this.move()
      } else {
        if (this.moveX === 0) {
          this.close()
          return
        }
        this.move()
      }
    },
    open() {
      this.x = this.moveX
      this.$nextTick(() => {
        this.x = -this.buttonWidth
        this.moveX = this.x

        if (!this.isopen) {
          this.isopen = true
          this.$emit('change', true)
        }
      })
    },
    close() {
      this.x = this.moveX
      this.$nextTick(() => {
        this.x = 0
        this.moveX = this.x
        if (this.isopen) {
          this.isopen = false
          this.$emit('change', false)
        }
      })
    },
    move() {
      if (this.slide === 0) {
        this.open()
      } else {
        this.close()
      }
    },
    onChange(e) {
      const x = e.detail.x
      this.moveX = x
      if (x >= this.buttonWidth) {
        this.disabledView = true
        this.$nextTick(() => {
          this.x = this.buttonWidth
        })
      }
    },
    getSlide(x) {
      if (x >= this.startX) {
        this.startX = x
        return 1
      } else {
        this.startX = x
        return 0
      }
    },
    getQuerySelect() {
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('.viewWidth-hook')
        .boundingClientRect((data) => {
          this.viewWidth = data[0].width
          this.buttonWidth = data[1].width
          this.transition = false
          this.$nextTick(() => {
            this.transition = true
          })

          if (!this.buttonWidth) {
            this.disabledView = true
          }

          if (this.autoClose) return
          if (this.show) {
            this.open()
          }
        })
        .exec()
    }
  }
}
